<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/user/1">用户</router-link>
      <button @click="goToStu">学生</button>
      <button @click="goToBook">书籍</button>
      <button @click="goToProfile">简历</button>
    </nav>

    <!-- 视图或者路由出口 -->
    <router-view></router-view>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function goToStu() {
  router.push({
    name: 'Stu',
    params: {
      id: '321'
    }
  })
}

function goToBook() {
  router.push({
    name: 'Book',
    query: {
      id: 'ISB123213',
      name: 'Vue3'
    }
  })
}

function goToProfile() {
  router.push({
    path: '/profile',
    state: {
      userId: '321',
      userName: '张三'
    }
  })
}
</script>
